<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>

    <!-- Google APIs Key for madrivergroup DNS -->
    <script type="text/javascript"
            src="http://www.google.com/jsapi?key=ABQIAAAA76OUMPln1nV1Ic32eFRSihQOSll7pvnbmBuLp3H2lUE6zoCtrRQ6PCKTbe-Revca3m2WLxLpABpUWw"
    </script>

   <!-- All of the needed JavaScript files -->
   <script src="scripts/biketrails.js"          type="text/javascript"></script>



   <script type="text/javascript">

       // Load Maps API
       google.load("maps","2");

       var bikeMgr = new BikeTrailManager();

       // Initialize our Trail
       function initializeBikeTrail() {


            // Display the map, with small controls and all of the types of maps
            bikeMgr.map = new google.maps.Map2(document.getElementById("map_canvas"));

            bikeMgr.map.addControl(new google.maps.SmallMapControl());
            var topRight = new google.maps.ControlPosition(G_ANCHOR_TOP_RIGHT, new google.maps.Size(10,10));
            bikeMgr.map.addControl(new google.maps.MapTypeControl(), topRight );
      
            // Add the Terrain Map Control
            bikeMgr.map.addMapType( G_PHYSICAL_MAP );
            bikeMgr.map.setMapType( G_PHYSICAL_MAP );
      
            // Center at the base on Eurish Pond Parking lot
            bikeMgr.map.setCenter(new google.maps.LatLng(44.148441,-72.87419), 15);


            // Set up marker mouseover Tooltip in div
            var tooltip = document.createElement("div");
            bikeMgr.mapTooltip = tooltip;
            bikeMgr.map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
            tooltip.style.visibility="hidden";

            // Defines if logging is on
            isLoggingOn = false;

		    // Need to pull this information from database
            var nameOfXmlFiles = new Array();
         	nameOfXmlFiles[0]  = "cyclone_working";
         	nameOfXmlFiles[1]  = "cyclone_workingII";


            //
            // Read the data from xml files and process
            //
         	for( var i = 0; i < nameOfXmlFiles.length; i++ ) {
		   
               var fileName = nameOfXmlFiles[ i ];
               var xmlFile = "xml/" + fileName + ".xml";

               // Create a New Trail and add G components
	           loadAndProcessXmlFile( xmlFile, bikeMgr );

			   // add trails to option list
               var option = '<option value="' + (i + 1) + '" >' + fileName + '</option>';
               var trailSelectElement = $("#listOfTrails");
               trailSelectElement.append( option );

            }


       } // end of initializeBikeTrail()


       google.setOnLoadCallback( initializeBikeTrail );


   </script>
   <script src="scripts/elabel.js"              type="text/javascript"></script>
   <script src="scripts/mapiconmaker.js"        type="text/javascript"></script>
   <script src="scripts/jquery-1.2.6.min.js"    type="text/javascript"></script>

   <script type="text/javascript">

       function adjustMapSize() {
          var x,y;
          if (self.innerHeight) { // all except Explorer 
             x = self.innerWidth;
             y = self.innerHeight;
	      }
	      else if (document.documentElement && document.documentElement.clientHeight)	{	// Explorer 6 Strict Mode 
		     x = document.documentElement.clientWidth;
		     y = document.documentElement.clientHeight;
	      }
	      else if (document.body) { // other Explorers 
		     x = document.body.clientWidth;
		     y = document.body.clientHeight;
	      }

	      var dim = Array(x,y);
	      $("#map_canvas").css("height",( dim[1]-50));

       } // end of getWinSize()

   </script>


   <script type="text/javascript">
    //<![CDATA[


	  $(document).ready( function() {

         // Adjust the Map Size based on browser
         adjustMapSize();


        //
		// When Trails Change show or hide appropriately
        //
		$("#listOfTrails").change(
					function() {
					    var selected = $("#listOfTrails option:selected").val();
					    if( selected == 0 ) {
					       showHideAllTrails( true );
					    }
					    else {
					       showHideAllTrails( false );
					       showHideTrail( selected -1 , true );
					    }
					}
		);

        //
        // When Town is changed Pan to the lat long of town
        //
		$("#listOfTowns").change(
					function() {
					    var selected = $("#listOfTowns option:selected").val();
					    if( selected == "Warren" ) {
                            bikeMgr.panToZoom( new GLatLng(44.1135,-72.8579), 13);
					    }
					    else {
                            bikeMgr.panToZoom( new GLatLng(44.1874,-72.8510), 13);
					    }
					}
		);


      }); // end of jquery.ready()

    //]]>
    </script>
				 
  </head>

    <!-- NEED TO MOVE TO STYLE SHEET -->
    <style type="text/css">
        .style1 {background-color:#ffffff;font-weight:bold;border:2px #006699 solid;}
        .style2 {background-color:#ffcccc;}
    </style>

    <!-- NEED TO MOVE TO STYLE SHEET -->
    <style type="text/css">
        .tooltip {
           background-color:#ffffff;
           font-weight:bold;
           border:2px #006699 solid;
        }

		// FIND BETTER HOME FOR
        .map_control {
			display:block;
			position:relative;
			width:100%;
			border-bottom:1px solid black;
			border-right:1px solid black;
			border-left:1px solid black;
			background-color: #F001122;
		}
        .map_control td {
			font:10px Verdana, Geneva, Arial, Helvetica, sans-serif;
			font-weight:bold;
		}

					
    </style>

  <body>

      <div id="map_canvas" class="map_canvas"></div>
      <div id="map_control" class="map_control">
         <table border="0" cellpadding="1">
           <tr>
            <td nowrap>Zoom to State:</td>		
            <td nowrap>
              <select name="state" class="state" style="background-color:#FFFFFF;">
                <option>
                  <option  value="VT">VT</option>
               </select>	
             </td>
         
            <td nowrap>County:</td>		
            <td nowrap>
              <select name="county" class="state" style="background-color:#FFFFFF;">
                <option>
                  <option  value="washington">Washington</option>
               </select>	
             </td>
         
            <td nowrap>Town:</td>		
            <td nowrap>
              <select id="listOfTowns" name="listOfTowns" class="listOfTowns" style="background-color:#FFFFFF;">
                <option>
                  <option  value="Warren">Warren</option>
                  <option  value="Waitsfield">Waitsfield</option>
               </select>	
             </td>
   
            <td nowrap>Trails:</td>		
            <td nowrap>
              <select id="listOfTrails" name="trails" class="trails" style="background-color:#FFFFFF;">
                <option>
                  <option  value="0" default>All</option>
               </select>	
             </td>
   					
           </tr>
         </table>
    </div>
   
			

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>
 
  </body>

</html>
